<template>
  <div class="main">
    <div class="InfoLabelList">
      <header-back v-show="!hideHeader"> </header-back>
      <!-- <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据"> -->
      <scroller ref="scrollerBottom">
        <div>
          <div style="height:0.8rem" v-show="!hideHeader"></div>
          <div class="expert-box">
            <div style="padding: 0 0.3rem; box-sizing: boder-box;">
              <div class="subtitle flex-h" style="padding: 0;" @click="goMore(1)">
                <span class="flex1" style="font-size: 0.3rem;">视频课程</span>
                <div class="flex1" style="text-align: right;">
                  <i class="imgIcon"></i>
                </div>
              </div>
              <courseItem :videoLists="videoList"></courseItem>
              <div class="subtitle flex-h" style="padding: 0;" @click="goMore(2)">
                <span class="flex1" style="font-size: 0.3rem;">图文课程</span>
                <div class="flex1" style="text-align: right;">
                  <i class="imgIcon"></i>
                </div>
              </div>
              <courseItem :videoLists="textList"></courseItem>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { getAppOneOneFiveCommodity } from '~/api/identity'

import headerBack from '~/components/headerBack'
import courseItem from './components/courseItem'
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
export default {
  components: {
    headerBack,
    courseItem,
  },
  data() {
    return {
      currentPage: 1,
      commodityList: [],
      professorList: [],
      hideHeader: false,
      textList: [],
      videoList: [],
    }
  },
  created() {},
  mounted: function() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
    this.$visit('oneOneFiveCourses')
    this.getAppOneOneFiveCommodity()
  },
  methods: {
    goMore(type) {
      this.$router.push({
        path: '../curriculum/subjectDetail?from=special&type=' + type,
      })
    },
    getAppOneOneFiveCommodity() {
      //根据id 查询对应主题的专题列表
      let obj = {
        topicId: 7,
      }
      getAppOneOneFiveCommodity(obj).then((res) => {
        this.textList = res.data.graphicCourse
        this.videoList = res.data.videoCourse
      })
    },
  },
}
</script>

<style scoped lang="less">
.expert-box {
  width: 100%;
  height: auto;
  background: #fff;
  padding-bottom: 0.2rem;
  overflow: hidden;
}

.subtitle {
  padding: 0 0.3rem;
  box-sizing: border-box;
  height: 0.8rem;
  margin: 0.2rem auto;
  span {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;
  }
  .imgIcon {
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
    background-size: 4.5rem 3.6rem;
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.InfoLabelList {
  width: 100%;
  height: 100vh;
  background: #fff;
}

.list-box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  h2 {
    font-size: 0.4rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    margin-bottom: 0.2rem;
  }
  .term {
    width: 100%;
    height: 1.9rem;
    margin-bottom: 0.3rem;
    .left {
      width: 3.2rem;
      height: 100%;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 0.1rem;
    }
    .right {
      padding-left: 0.3rem;
      box-sizing: border-box;
      span {
        display: block;
        font-size: 0.3rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        height: 0.8rem;
      }
      b {
        display: block;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-top: 0.5rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
